<template>
  <div class="blog-preview">
    <div class="list-box">
      <div class="list" v-for="item in list" :key="item.id">
        <b>___</b>
        <p class="title">{{item.title}}</p>
        <div class="text">{{item.brief}}</div>
        <span @click="toDetails(item)">阅读全文</span>
      </div>
    </div>
    <Page :total="140" size="small" show-total :page-size="5"/>
  </div>
</template>
<script>
import { getBlog } from '@/api/server.js';
export default {
  name: 'blogPreview',
  components: {

  },
  data(){
    return {
      list: []
    }
  },
  mounted() {
    // this.list = [
    //   {
    //     id: '1',
    //     title: "微电子报账系统上线公告",
    //     brief: "微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢！微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢!"
    //   },
    //   {
    //     id: '2',
    //     title: "华润微电子报账系统影像岗操作手册",
    //     brief: "微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢！微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢!"
    //   },
    //   {
    //     id: '3',
    //     title: "报账系统审批流程操作手册",
    //     brief: "微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢！微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢!"
    //   },
    //   {
    //     id: '4',
    //     title: "微电子报账系统上线公告",
    //     brief: "微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢！微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢!"
    //   },
    //   {
    //     id: '5',
    //     title: "华润微电子报账系统影像岗操作手册",
    //     brief: "微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢！微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢!"
    //   },
    //   {
    //     id: '6',
    //     title: "微电子报账系统上线公告",
    //     brief: "微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢！微电子报账系统试点上线公司为华晶、安盛、赛美科、矽磐，请非此四家试点公司的人员在提交报销单时选择这四家公司方可报销，否则不允许使用该系统报销，谢谢!"
    //   },
    // ]
    getBlog({currentPage:1, pageSize: 10}).then(res => {
      this.list = res.data;
    })
  },
  methods: {
    toDetails(item) {
      let routeData = this.$router.resolve({
        name: "BlogDetails",
        query: {type:'blog',id: item.id,title: item.title}
      });
      window.open(routeData.href, '_blank')
    },
  },
}
</script>
<style lang="less" scoped>
  @import url("../../assets/css/global.less");
  .blog-preview {
    padding-top: 2rem;
    height: 100%;
    .list-box {
      height: calc(100% - 3rem);
      overflow-y: scroll;
      .list {
        margin-right: 15vw;
        margin-bottom: 2rem;
        &>b {
          font-size: 1.4rem;
        }
        &>.title {
          margin-top: 1rem;
          margin-bottom: 1rem;
          font-size: 1.4rem;
          font-weight: 500;
        }
        &>.text {
          margin-bottom: 1rem;
        }
        &>span {
          cursor: pointer;
          color: @color-modification;
        }
      }
      
    }
    /deep/ .ivu-page.mini {
      padding: 5px 0;
    }
    
  }
</style>
